<template>
  <div class="region-select" :style="{ width: width }">
    <el-select
      v-model="selectedProvince"
      placeholder="省（自治区、直辖市、特别行政区）"
      :disabled="disabled"
      clearable
      filterable
      @change="handleProvinceChange"
    >
      <el-option
        v-for="item in provinces"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      />
    </el-select>

    <el-select
      v-model="selectedCity"
      placeholder="地级市（地区、自治州、盟）"
      :disabled="disabled"
      clearable
      filterable
      @change="handleCityChange"
    >
      <el-option
        v-for="item in cities"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      />
    </el-select>

    <el-select
      v-model="selectedDistrict"
      placeholder="县（县级市、区等）"
      :disabled="disabled"
      clearable
      filterable
      @change="handleDistrictChange"
    >
      <el-option
        v-for="item in districts"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      />
    </el-select>

    <el-select
      v-model="selectedTown"
      placeholder="乡（镇、街道等）"
      :disabled="disabled"
      clearable
      filterable
      @change="handleTownChange"
    >
      <el-option
        v-for="item in towns"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      />
    </el-select>

    <el-select
      v-model="selectedVillage"
      placeholder="村"
      :disabled="disabled"
      clearable
      filterable
      @change="handleVillageChange"
    >
      <el-option
        v-for="item in villages"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      />
    </el-select>
  </div>
</template>

<script>
import { handleList } from '@/views/sys/area/api'

export default {
  // 当前页面名称（组件）
  name: 'FtRegionSelect',
  // 引用组件
  components: { },
  directives: { },
  filters: {},
  // props属性 这里只定义了基本的，目的是防止用户传递无效的属性（如错误拼写），其他的el-select的属性会默认继承，用法一样，因为使用v-bind="$attrs"，这个会将非props定义的属性继承过来
  props: {
    value: {
      type: Array,
      default: undefined
    },
    disabled: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      // 当前选择的值
      selectedProvince: '',
      selectedCity: '',
      selectedDistrict: '',
      selectedTown: '',
      selectedVillage: '',
      // 当前选择的名称
      selectedProvinceName: '',
      selectedCityName: '',
      selectedDistrictName: '',
      selectedTownName: '',
      selectedVillageName: '',
      provinces: [],
      cities: [],
      districts: [],
      towns: [],
      villages: []
    }
  },
  computed: {},
  watch: {
    value(val) {
      if (val && val.length >= 1) {
        this.selectedProvince = val[0]
      }
      if (val && val.length >= 2) {
        this.selectedCity = val[1]
      }
      if (val && val.length >= 3) {
        this.selectedDistrict = val[2]
      }
      if (val && val.length >= 4) {
        this.selectedTown = val[3]
      }
      if (val && val.length >= 5) {
        this.selectedVillage = val[4]
      }
    },
    selectedValue(val) {
      this.$emit('input', val)
    }
  },
  created() {},
  mounted() {
    this.handleLoadProvinces('0')
  },
  methods: {
    handleLoadProvinces(code) {
      handleList({ parentCode: code, status: 'Y' }).then(res => {
        this.provinces = res.data || []
      })
    },
    handleLoadCities(code) {
      handleList({ parentCode: code, status: 'Y' }).then(res => {
        this.cities = res.data || []
      })
    },
    handleLoadDistricts(code) {
      handleList({ parentCode: code, status: 'Y' }).then(res => {
        this.districts = res.data || []
      })
    },
    handleLoadTowns(code) {
      handleList({ parentCode: code, status: 'Y' }).then(res => {
        this.towns = res.data || []
      })
    },
    handleLoadVillages(code) {
      handleList({ parentCode: code, status: 'Y' }).then(res => {
        this.villages = res.data || []
      })
    },
    // 处理省份选择变化
    handleProvinceChange(value) {
      this.selectedProvince = value
      this.selectedCity = ''
      this.selectedDistrict = ''
      this.selectedTown = ''
      this.selectedVillage = ''

      // 获取省份名称
      const province = this.provinces.find(item => item.value === value)
      this.selectedProvinceName = province ? province.name : ''
      this.selectedCityName = ''
      this.selectedDistrictName = ''
      this.selectedTownName = ''
      this.selectedVillageName = ''

      this.cities = []
      this.districts = []
      this.towns = []
      this.villages = []

      // 加载城市数据
      this.handleLoadCities(value)
    },
    // 处理城市选择变化
    handleCityChange(value) {
      this.selectedCity = value
      this.selectedDistrict = ''
      this.selectedTown = ''
      this.selectedVillage = ''

      // 获取城市名称
      const city = this.cities.find(item => item.value === value)
      this.selectedCityName = city ? city.name : ''
      this.selectedDistrictName = ''
      this.selectedTownName = ''
      this.selectedVillageName = ''

      this.districts = []
      this.towns = []
      this.villages = []

      // 加载区县数据
      this.handleLoadDistricts(value)
    },
    // 处理区县选择变化
    handleDistrictChange(value) {
      this.selectedDistrict = value
      this.selectedTown = ''
      this.selectedVillage = ''

      // 获取区县名称
      const district = this.districts.find(item => item.value === value)
      this.selectedDistrictName = district ? district.name : ''
      this.selectedTownName = ''
      this.selectedVillageName = ''

      this.towns = []
      this.villages = []

      // 加载乡镇数据
      this.handleLoadTowns(value)
    },

    // 处理乡镇选择变化
    handleTownChange(value) {
      this.selectedTown = value
      this.selectedVillage = ''

      // 获取乡镇名称
      const town = this.towns.find(item => item.value === value)
      this.selectedTownName = town ? town.name : ''
      this.selectedVillageName = ''

      this.villages = []

      // 加载村/街道数据
      this.handleLoadVillages(value)
    },

    // 处理村/街道选择变化
    handleVillageChange(value) {
      this.selectedVillage = value

      // 获取村/街道名称
      const village = this.villages.find(item => item.value === value)
      this.selectedVillageName = village ? village.name : ''

      // 这里可以触发一个事件通知父组件
      this.$emit('change', {
        province: this.selectedProvince,
        city: this.selectedCity,
        district: this.selectedDistrict,
        town: this.selectedTown,
        village: this.selectedVillage,
        fullName: [
          this.selectedProvinceName,
          this.selectedCityName,
          this.selectedDistrictName,
          this.selectedTownName,
          this.selectedVillageName
        ].filter(Boolean).join(' ')
      })
    }
  }
}
</script>
<style>
.region-select{
  display: flex;
}
</style>
